@import "./vars.scss";

.company-profile {
  position: relative;
  background-color: $bg2;
  .comp-h2 {
    text-align: center;
    padding-top: 125px;
    margin-bottom: 42px;
    color: $color9;
  }
  .comp-body {
    @include display(flex);
    @include justify-content(space-between);

    .compb-left {
      width: px2per2(590, 1430);
      flex-basis: px2per2(590, 1430);
      font-size: 16px;
      position: relative;

      .compb-h4 {
        font-size: 28px;
        margin-top: px2vw(80);
        color: $color10;
      }
      .compb-h4-p {
        line-height: 2;
        color: $color9;
      }

      .absn-h5-p {
        line-height: 32px;
        margin-top: 25px;
        color: $color9;
      }

      .compb-h5 {
        margin-top: 55px;
        color: $color10;
      }
    }

    .compb-right {
      width: px2per2(769, 1430);
      flex-basis: px2per2(769, 1430);
      position: relative;
      z-index: 10;

      .map-legend {
        @include display(flex);
        color: $color9;
        padding: 5px 0 0 15%;
        .map-label {
          width: 48px;
          flex-basis: 48px;
        }
        .mapl-position {
          @include display(flex);
          @include flex-direction(column);
          margin-left: 16px;
        }
        .mapl-dfn {
          margin-bottom: 16px;
          cursor: pointer;
        }
        .iconfont {
          color: $mark;
          margin-right: 3px;
          font-size: 12px;
        }
      }

      .map-svg {
        stroke-dasharray: 1200;
        stroke-dashoffset: 0;

        animation-fill-mode: forwards;
      }
      .mapStroke-animate {
        animation: mapPath 5s linear;
      }

      .mark1 {
        right: 23%;
        color: $mark;
      }
      .mark2 {
        top: 52%;
        right: 24%;
        color: $mark;
      }

      .map-pic {
        .map-svg {
          enable-background: new 0 0 1097 1073.5;
        }
        .st0 {
          fill: none;
          stroke: #919191;
          stroke-width: 0.5;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        .st1 {
          fill: none;
          stroke: #bfbfbf;
          stroke-width: 0.5;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        .st2 {
          fill-rule: evenodd;
          clip-rule: evenodd;
          fill: none;
          stroke: #919191;
          stroke-width: 0.5;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
      }
    }
  }

  .figure-wrapper {
    position: relative;
    margin-top: 30px;

    .figure-toggleBtn {
      position: absolute;
      left: px2per2(650, 1430);
      transform: translate(-50%, -100%);
      @include display(flex);
      z-index: 10;

      span {
        width: 50px;
        height: 32px;
        background-color: #fff;
        color: $color1;
        @include display(flex);
        @include justify-content(center);
        @include align-items(center);
        cursor: pointer;
        &.on {
          color: #fff;
          background-color: $active;
        }
        .iconfont {
          font-size: 19px;
        }
      }
    }

    .figure-slider {
      @include display(flex);
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      @include transition(opacity 0.3s);
      &.on {
        visibility: visible;
      }
    }
    .figure-img {
      position: relative;
      top: 0;
      left: 0;
      height: 300px;
      min-width: px2per2(650, 1430);
      width: px2per2(650, 1430);
      flex-basis: px2per2(650, 1430);
      @include display(flex);
      @include justify-content(flex-end);
      .figure-bg {
        position: absolute;
        width: 0%;
        left: 0;
        height: 100%;
        @include transition(width 1.5s);
        background-color: transparent;
      }
      .figure-imgWrapper {
        position: absolute;
        left: 0;
        height: 100%;
        width: 0%;
        @include transition(width 1.5s);
        overflow: hidden;
      }
    }
    .figure-info {
      position: relative;
      z-index: 8;
      height: 400px;
      overflow-x: hidden;
      width: px2per2(702, 1430);
      flex-basis: px2per2(702, 1430);
      background-color: #fff;
      @include display(flex);
      @include flex-direction(column);
      @include justify-content(center);
      padding: 5%;
      color: $color11;
      opacity: 0;

      .figure-h4 {
        font-size: 18px;
        margin-bottom: 28px;
      }

      .figure-content {
        line-height: 2;
      }
    }
  }

  .about-service {
    @include display(flex);
    margin-top: 123px;
    .aser_h2 {
      margin-top: 20px;
    }
    .about-right {
      flex: 1;
    }
    .about-container {
      width: 600px;
      margin: 0 auto;
    }
    .about-service-body {
      margin: 72px 0 0;
      width: auto;
      text-align: left;
      .service-item {
        background-color: $bg2;
      }
    }
  }
}
.corporate-philosophy-bg {
  background-color: $bg2;
}

.corporate-philosophy {
  position: relative;
  overflow: hidden;

  // background-image: url("../imgs/about-bg2.png");
  height: 812px;
  max-height: 70vh;
  background-size: cover;
  @include display(flex);
  @include flex-direction(column);
  @include justify-content(center);
  @include align-items(center);
  color: #fff;
  .cop-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .corp-h4 {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
  }
  .corp-p {
    font-size: 20px;
    position: relative;
  }
}

.development-path {
  position: relative;
  padding-bottom: 160px;
  .dep_h2 {
    text-align: center;
    padding-top: 127px;
    margin-bottom: 80px;
    font-size: 34px;
    font-weight: bold;
  }

  .paging {
    position: relative;
    @include display(flex);
    @include transition(all 0.5s);
    margin-top: 97px;
    font-family: GideonRoman_REGULAR;
    font-size: px2vw(26);
    color: $color6;
    .dep-pagination-dot {
      position: relative;
      outline: 0;
      width: 16.66667%;
      @include flex-basis(16.66667%);
      cursor: pointer;
      @include display(flex);
      @include flex-direction(column);
      &::before {
        content: "";
        height: 1px;
        z-index: -1;
        width: 100%;
        left: 12px;
        bottom: 12px;
        position: absolute;
        background-color: #ececec;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      .dep-svg {
        pointer-events: none;
      }
      span {
        position: relative;
        margin-bottom: 15px;
      }
      &.active {
        span {
          color: $active;
        }
        .dep-dot {
          fill: $active;
        }
        .dep-cicle {
          animation: circlePath 0.5s linear;
          stroke: $active;
          stroke-width: 1;
          stroke-dasharray: 76;
          stroke-dashoffset: 0;

          animation-fill-mode: forwards;
        }
      }
    }

    .dep-dot {
      fill: $color6;
    }
    .dep-cicle {
      fill: none;
      stroke: none;
    }
  }
  .dep-content {
    position: relative;
    .dep-btngroup {
      position: absolute;
      right: 0;
      top: 0;
      background: #fff;
      z-index: 8;
      padding-left: 10px;
      bottom: 0;
      @include display(flex);
      @include flex-direction(column);
      @include justify-content(center);
      @include align-items(center);

      .dep-prev,
      .dep-next {
        user-select: none;
        width: 48px;
        height: 48px;
        @include display(flex);
        @include justify-content(center);
        @include align-items(center);
        border: 1px solid $border2;
        border-radius: 50%;
        @include transition(border-color 1s);
        cursor: pointer;
        .iconfont {
          color: $arrow;
          font-size: 24px;
        }
        &:hover {
          border-color: $active;
          .iconfont {
            color: $active;
          }
        }
      }

      .dep-prev {
        margin-bottom: 25px;
      }
    }
  }
  .dep-swiper {
    position: relative;
  }

  .dep-wrapper {
    .dep-slide {
      @include display(flex);
      @include transition(opacity 1.5s);
      @include justify-content(space-between);
      &.swiper-slide-prev {
        opacity: 0;
      }
      &.swiper-slide-next {
        opacity: 0;
      }
      &.swiper-slide-active {
        opacity: 1;
      }
    }
    .dep-figure {
      width: px2per2(538, 1340);
      flex-basis: px2per2(538, 1340);
    }
    .dep-main {
      padding-right: px2per2(110, 1340);
      width: px2per2(710, 1340);
      flex-basis: px2per2(710, 1340);
    }
    .dep-year {
      font-size: px2vw(88);
      margin-bottom: px2vw(70);
      margin-top: px2vw(55);
      font-family: GideonRoman_REGULAR;
      color: $color12;
    }
    .dep-cont {
      line-height: 1.75;
      font-size: 16px;
      @include line-clamp(3);
    }
  }
}

.social-resposibility {
  position: relative;
  background-image: url("../imgs/social-bg.png");
  overflow: hidden;
  margin-bottom: px2vw(200);
  background-size: cover;
  .social_h2 {
    margin-top: px2vw(254);
    text-align: center;
    color: #fff;
  }
  .social-body {
    @include display(flex);

    .social-left {
      margin-top: px2vw(303);
      width: px2per(925);
      flex-basis: px2per(925);
      text-align: center;
      .socrl-pic {
        display: inline-block;
        width: px2per2(388, 925);
        overflow: hidden;
        opacity: 1;
        @include transition(all 1.5s);
        &:hover {
          border-radius: px2vw(99) 0;
        }

        img {
          width: 100%;
        }
      }
    }
    .social-right {
      margin-top: px2vw(140);
      width: px2per(995);
      flex-basis: px2per(995);
      background-color: #fff;
      border-radius: px2vw(112) 0 0 0;
      overflow: hidden;
      padding: px2vw(159) px2vw(300) px2vw(100) px2vw(124);
      .socrr-icon {
        width: px2vw(81);
      }
      .socrr-h5 {
        margin-top: px2vw(55);
        margin-bottom: px2vw(67);
        font-size: px2vw(24);
        font-weight: bold;
        line-height: 1.41;
        color: $color13;
      }

      .socrr-p {
        color: $color12;
        line-height: 1.75;
        font-size: 16px;
        @include line-clamp(4);
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .company-profile {
    padding: 0 15px;
  }
  .company-profile .comp-h2 {
    padding-top: 30px;
    margin-bottom: 20px;
  }
  .company-profile .comp-body {
    flex-direction: column;
  }
  .company-profile .comp-body .compb-left .compb-h4 {
    font-size: 20px;
    margin-top: 0;
    font-weight: 400;
  }
  .company-profile .comp-body .compb-left .compb-h5 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 400;
  }
  .company-profile .comp-body .compb-left .absn-h5-p,
  .company-profile .comp-body .compb-left .compb-h4-p {
    line-height: 1.5;
    font-size: 14px;
    margin-top: 15px;
    overflow: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }
  .company-profile .comp-body .compb-left,
  .company-profile .comp-body .compb-right {
    width: 100%;
    flex-basis: unset;
  }
  .company-profile .comp-body .compb-right {
    margin-top: 20px;
  }
  .company-profile .comp-body .compb-right .map-legend {
    padding: 20px 0;
    font-size: 14px;
  }
  .company-profile .comp-body .compb-right .map-legend .iconfont {
    font-size: 14px;
  }
  .company-profile .about-service {
    flex-direction: column;
    margin-top: 20px;
    padding-bottom: 20px;
  }
  .company-profile .figure-wrapper .figure-toggleBtn {
    left: 50%;
  }
  .company-profile .figure-wrapper .figure-slider {
    flex-direction: column;
  }
  .company-profile .figure-wrapper .figure-img {
    width: 100%;
    min-width: 100%;
    flex-basis: 100%;
  }
  .company-profile .about-service .about-container {
    width: 100%;
  }
  .company-profile .about-service .about-service-body {
    margin: 20px 0;
  }
  .company-profile .about-service .about-service-body .service-item {
    height: unset;
    line-height: 1.5;
    font-size: 14px;
  }
  .company-profile .figure-wrapper .figure-info {
    width: 100%;
    flex-basis: unset;
    height: unset;
    @include justify-content(flex-start);
  }
  .company-profile .figure-wrapper .figure-info .figure-h4 {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .company-profile .figure-wrapper .figure-info .figure-content {
    line-height: 1.5;
    font-size: 14px;
  }
  .corporate-philosophy .corp-h4 {
    font-size: 30px;
  }
  .corporate-philosophy .corp-p {
    text-align: center;
  }
  .development-path {
    padding: 0 15px 30px;
  }
  .development-path .dep_h2 {
    padding-top: 30px;
    text-align: left;
    margin-bottom: 30px;
    font-size: 24px;
  }
  .development-path .paging {
    display: none;
  }
  .development-path .dep-content .dep-btngroup {
    bottom: unset;
    transform: translateY(-70px);
    @include flex-direction(row);
  }
  .development-path .dep-content .dep-btngroup .dep-prev {
    margin-bottom: 0;
  }
  .development-path .dep-wrapper .dep-figure {
    width: 100%;
    flex-basis: unset;
  }
  .development-path .dep-wrapper .dep-main {
    width: 100%;
    padding-right: 0;
    flex-basis: unset;
  }
  .development-path .dep-wrapper .dep-slide {
    flex-direction: column;
  }
  .development-path .dep-wrapper .dep-year {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .development-path .dep-wrapper .dep-cont {
    line-height: 1.5;
    font-size: 14px;
    overflow: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }
  .social-resposibility .social-body .social-left .socrl-pic {
    padding: 0 15px;
    width: 100%;
  }
  .social-resposibility .social-body .social-left {
    width: 50%;
    flex-basis: 50%;
    margin-top: 90px;
  }
  .social-resposibility .social-body .social-right {
    width: 50%;
    flex-basis: 50%;
    padding: 15px;
    margin-top: 30px;
  }
  .social-resposibility .social-body .social-right .socrr-icon {
    width: 40px;
  }
  .social-resposibility .social-body .social-right .socrr-h5 {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .social-resposibility .social-body .social-left .socrl-pic:hover {
    border-radius: 10px 0;
  }
  .social-resposibility .social-body .social-right .socrr-p {
    font-size: 14px;
    line-height: 1.5;
    overflow: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }
  .company-profile .comp-body .compb-right .mark2 {
    top: 47%;
  }
  .company-profile .comp-body .compb-right .mark1 {
    top: 40%;
  }
}

@media screen and (min-width: 1921px) {
  .development-path .dep-wrapper .dep-year {
    font-size: 88px;
    margin-top: 55px;
    margin-bottom: 70px;
  }
  .development-path .paging {
    font-size: 26px;
  }
  .social-resposibility .social-body .social-left .socrl-pic {
    border-radius: 99px 0;
  }
  .social-resposibility .social-body .social-right {
    border-radius: 112px 0 0 0;
  }
}
